<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="jquery/jquery-3.4.1.js"></script>
<div class="container">
    <select class="form-control" style="width: 150px;display: inline-block" id="province">
        <!--<option>请选择省份</option>-->
    </select>

    <select class="form-control" style="width: 150px;display:inline-block" id="city">
        <!--<option>请选择城市</option>-->
    </select>

    <select class="form-control" style="width: 150px;display: inline-block" id="area">
        <!--<option>请选择地区</option>-->
    </select>
</div>



<script>
    function getProvince(){
        $.getJSON("http://localhost:8080/webdemo/reactinchain?action=province",function (data) {
            var html='<option>请选择省份</option>'

            for(var i=0;i<data.length;i++){
                html=html+'<option value="'+data[i].id+'">'+data[i].proName+'</option>'
            }

            $('#province').html(html)
        })
    }

    getProvince();


    $('#province').change(function () {

        var proId=$(this).val()
        $.getJSON("http://localhost:8080/webdemo/reactinchain?action=city&proid="+proId,function (data) {

            var html='<option>请选择城市</option>'

            for(var i=0;i<data.length;i++){
                html=html+'<option value="'+data[i].id+'">'+data[i].cityName+'</option>'
            }

            $('#city').html(html)


    })

        // $("#city").html("<option>请选择地区</option>")

    })



            $('#city').change(function () {
                var cityId = $(this).val()
                $.getJSON("http://localhost:8080/webdemo/reactinchain?action=area&cityid=" + cityId,function (data) {
                    var html = '<option>请选择地区</option>'
                    for (var i = 0; i < data.length; i++){
                        html = html + '<option value="' + data[i].id + '">' + data[i].areaName + '</option>'
                    }
                    $("#area").html(html)
                })
            })
</script>
</body>
</html>